<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Document</title>
</head>

<body>
    <canvas class="myCanvas" width="500px" height="500px" style="border:1px solid black;display:block;margin:0 auto;">
        您的浏览器不支持该标签，请您更换浏览器！！
    </canvas>
    <script>
        var myCanvas = document.querySelector('.myCanvas');
        var paint = myCanvas.getContext('2d');        
        myCanvas.onmousedown = function(e){
            paint.beginPath();
            var x = e.pageX - myCanvas.offsetLeft;
            var y = e.pageY - myCanvas.offsetTop;
            paint.moveTo(x,y);
            document.onmousemove = function(e){
                var x = e.pageX - myCanvas.offsetLeft;
                var y = e.pageY - myCanvas.offsetTop;
                paint.lineTo(x,y);
                // paint.closePath();
                paint.stroke();
            };
           document.onmouseup = function(){
                document.onmousemove = document.onmousedown = null;
            }
            return false;

        }
        //注意的事件：绑定的时候别绑错对象了。

      
    </script>
</body>

</html>